import { useEffect, useState } from "react";
import {
  IconCloud,
  IconCurrencyDollar,
  IconEaseInOut,
  IconTerminal2,
  IconHome,
  IconUser,
  IconMessage,
  IconEdit,
} from "@tabler/icons-react";
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  Button,
  Link,
} from "@heroui/react";
import { AcmeIcon } from "../../components/acme";
import PerfectScrollbar from "react-perfect-scrollbar";
import "react-perfect-scrollbar/dist/css/styles.css";
import "../../ps_bar.css";
import { TextHoverEffect } from "../../components/ui/text-hover-effect";
import { TextGenerateEffect } from "../../components/ui/text-generate-effect";
import { BackgroundBeamsWithCollision } from "../../components/ui/background-beams-with-collision";
import { FeaturesSection } from "./../../components/ui/features-section";
import NavBar from "../../components/NavBar";

export default function IndexLayOut() {
  const [active, setActive] = useState(null);
  const features = [
    {
      title: "并发",
      description: "基于Rust语言进行开发,发挥Rust语言无畏并发的特点",
      icon: <IconTerminal2 />,
    },
    {
      title: "简单易用",
      description: "上传特定文件即可开始使用",
      icon: <IconEaseInOut />,
    },
    {
      title: "云端存储",
      description: "将文件以及预测结果存入云端",
      icon: <IconCloud />,
    },
    {
      title: "自定义",
      description: "用户可自定义模型并进行预测",
      icon: <IconEdit />,
    },
  ];
  const navItems = [
    {
      name: "Home",
      link: "/",
      icon: <IconHome className="h-4 w-4 text-neutral-500 dark:text-white" />,
    },
    {
      name: "About",
      link: "/about",
      icon: <IconUser className="h-4 w-4 text-neutral-500 dark:text-white" />,
    },
    {
      name: "Contact",
      link: "/contact",
      icon: (
        <IconMessage className="h-4 w-4 text-neutral-500 dark:text-white" />
      ),
    },
  ];
  useEffect(() => {});
  return (
    <PerfectScrollbar className="w-[100%] h-[100%]" options={{}}>
      <NavBar className="border rounded-full shadow-md"></NavBar>
      <BackgroundBeamsWithCollision className="w-[100%] md:h-[100%]">
        <div className="w-[100%] h-[100%] flex justify-center items-center">
          <TextHoverEffect text="RmPredict"></TextHoverEffect>
          <TextGenerateEffect
            words="基 于 SIR/SEIR 模型 开 发 的 疾 病 传 播 分 析 平 台"
            className="absolute top-[40%]"
          ></TextGenerateEffect>
        </div>
        <div className="absolute bottom-0 flex justify-center">
          <FeaturesSection features={features}></FeaturesSection>
        </div>
      </BackgroundBeamsWithCollision>
    </PerfectScrollbar>
  );
}
